<template>
  <el-button @click="visible = true">打开弹窗</el-button>
  
  <zl-dialog
    v-model="visible"
    :option="dialogOption"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <p>这是弹窗内容</p>
  </zl-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ZlDialog } from '@zl-crud/components'
import '@zl-crud/components/dialog/style/index'

const visible = ref(false)

const dialogOption = {
  title: '弹窗标题',
  width: 800,
  isFullBtn: true,
  isTabBtn: true
}

const handleConfirm = () => {
  console.log('确认')
  visible.value = false
}

const handleCancel = () => {
  console.log('取消')
}
</script>